<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增课程')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <link th:href="@{/css/layui/layui.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-course-add">

            <h4 class="form-header h4">课程信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label  is-required">课程名称：</label>
                        <div class="col-sm-8">
                            <input name="title" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">专业名称</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input id="proId" name="proId" type="hidden"/>
                                <input class="form-control" type="text" onclick="selectSpecializedTree()" id="proName" readonly="true">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label  is-required">归属部门：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="deptId" id="treeId" type="hidden">
                                <input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属部门" class="form-control" required>
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">封面：</label>
                        <div class="col-sm-8">
                            <input type="hidden" id="image" name="image">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1" style="width: 95px;height: 95px">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">教师：</label>
                        <div class="col-sm-8">
                            <input name="userName" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required" >年级：</label>
                        <div class="col-sm-8">
                            <input name="grade" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">课件信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择视频</button>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction">上传视频</button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">介绍：</label>
                        <div class="col-sm-8">
                            <textarea name="introduce" rows="5" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>


        </form>
    </div>

    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "edu/course"
        var attachmentList = [];
        $("#form-course-add").validate({
            focusCleanup: true
        });

        function selectSpecializedTree() {
            var options = {
                title: '专业选择',
                width: "380",
                url:  "/edu/specialized/selectSpecializedTree/" + $("#treeId").val(),
                callBack: doSubmitSpe
            };
            $.modal.openOptions(options);
        }

        function doSubmitSpe(index, layero){
            var body = layer.getChildFrame('body', index);
               $("#proId").val(body.find('#treeId').val());
               $("#proName").val(body.find('#treeName').val());
               layer.close(index);
        }

        function submitHandler() {
            if ($.validate.form()) {
                var data = $("#form-course-add").serializeArray();

                var attach =[];
                attachmentList.forEach(function (value, index) {
                    if(value.delFlag == 0){
                       var obj = {};
                        obj.attOgfName = value.attachment;
                        obj.storagePath = value.url;
                        obj.attSize = value.size;

                        var fileName = value.attachment;
                        var first = fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                        var namelength = fileName.length;//取到文件名长度
                        var filesuffix = fileName.substring(first + 1, namelength );//截取获得后缀名
                        obj.attSuffix = filesuffix;
                        attach.push(obj);
                    }
                })

                var strify = JSON.stringify(attach);

                data.push({"name": "upAttListJosn", "value": strify});
                $.operate.save(prefix + "/add", data);
            }
        }

        /* 用户管理-新增-选择部门树 */
        function selectDeptTree() {
            var treeId = $("#treeId").val();
            var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
            var url = ctx + "system/dept/selectDeptTree/" + deptId;
            var options = {
                title: '选择部门',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        var attachmentList = [];
        layui.use('upload', function(){
            var $ = layui.jquery
                ,upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: ctx + 'common/upload' //改成您自己的上传接口
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }else{
                        $("#image").val(res.url);
                    }

                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            //多文件列表示例
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#testList'
                ,url: ctx + 'common/upload' //改成您自己的上传接口
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction',
                accept: 'video' //只允许上传图片
                ,acceptMime: 'video/mp4' //只筛选图片
                ,size: 1024*1024 //限定大小
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            attachmentList.forEach(function (value, index1) {
                                if(value.id == index){
                                    value.delFlag = 1;
                                }
                            })
                            console.log(attachmentList);
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });
                        var d = {"attachment":file.name,"size":(file.size/1024).toFixed(1),"id":index,"delFlag":0};
                        attachmentList.push(d);
                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code === 0){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        attachmentList.forEach(function (value, index1) {
                            if(value.delFlag == 0 && value.id == index){
                                value.url = res.url;
                            }
                        })
                        console.log(attachmentList);
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });

    </script>
</body>
</html>
